/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 15:56:32
 * @version: v1.0.0
 * @Descripttion: 流程线
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-14 18:54:37
 * @Auditor: 
 */
import React, { useState, useContext, useCallback, useEffect } from 'react';
import { Tabs } from '@library';
import { Form, Input } from 'antd';
import context from '../context';
import SequenceFlowSet from './_SequenceFlowSet';
import { SequenceFlowSelfProps } from './../../../interface';
import style from './../style.module.scss';

const FormItem = Form.Item;
const t = window.$app.t;

const tabsData = [
  { id: 'base', label: t('baseSet') },
  { id: 'sequenceflow', label: t('termSet') }
]

export default () => {
  const { modeler, self } = useContext(context);
  const [curTab, setCurTab] = useState(tabsData[0].id);
  const [name, setName] = useState('');

  const _self = self as SequenceFlowSelfProps;

  useEffect(() => {
    setName(_self.businessObject?.name || '')
  }, [_self]);

  const onChangeName = useCallback((e: React.BaseSyntheticEvent) => {
    setName(e.target.value);
    modeler.get('modeling').updateLabel(_self, e.target.value);
  }, [_self, modeler]);

  return (
    <div className={style.scroll}>
      <Tabs mode='tabs' onChange={setCurTab} curTabId={curTab} tabs={tabsData} />
      <main>
        {curTab === 'base' && (
          <Form layout='vertical'>
            <FormItem label={t('numberID')} required>
              <Input disabled value={_self.businessObject?.id} />
            </FormItem>
            <FormItem label={t('lineName')} required>
              <Input value={name} onChange={onChangeName} />
            </FormItem>
          </Form>
        )}
        {curTab === tabsData[1].id && (
          <SequenceFlowSet/>
        )}
      </main>
    </div>
  )
}